<!--
 * @Author: lixb
 * @Date: 2020-09-02 11:08:39
 * @LastEditTime: 2020-09-10 16:08:16
 * @Descripttion: 预览图片（单张）
-->
<template>
  <div v-show="isShow" class="view-module">
    <div class="close" @click="closePreview">x</div>
    <img :src="previewUrl" />
  </div>
</template>
<script>
  export default {
    props: {
      previewUrl: {
        type: String,
        required: true,
      },
      isShow: {
        required: true,
        type: Boolean,
      },
    },
    data() {
      return {};
    },
    methods: {
      closePreview() {
        this.$emit('closePreview');
      },
    },
  };
</script>
<style lang="scss" scoped>
  .view-module {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(19, 18, 18, 0.5);
    img {
      width: 35%;
      height: 80%;
      object-fit: contain;
      margin-left: 32%;
      margin-top: 5%;
    }
    .close {
      font-size: 50px;
      color: white;
      float: right;
      margin: 20px 50px 0 0;
      cursor: pointer;
    }
  }
</style>
